<template>
  <view class="controlCheck-container">
    <u-navbar placeholder autoBack>
      <view slot="center" style="width: 80vw">
        <TopBar class="tab-bar" :tabBars="tabBars" :tabIndex="tabIndex" @change="onTabChange" backgroundColor="#fff" />
      </view>
    </u-navbar>
    <component ref="comp" v-bind:is="currentTabComponent" />
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import TopBar from '@/components/top-bar/index.vue'
import recordItem from './recordItem.vue'
import UNavbar from '@/uni_modules/uview-ui/components/u-navbar/u-navbar.vue'

export default {
  components: {
    UNavbar,
    Empty,
    TopBar,
    recordItem
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName
    }
  },

  data() {
    return {
      textColor: true,

      tabBars: [
        {
          name: '线上培训记录',
          componentName: 'recordItem',
          index: 0
        },
        {
          name: '线下培训记录',
          componentName: 'recordItem',
          index: 1
        }
      ],
      tabIndex: 0,
      taskSearchParams: undefined,
      recordSearchParams: undefined
    }
  },
  onShow() {
    if (this.$refs.comp) {
      this.$refs.comp.initData(this.tabIndex)
    }
  },
  // onReachBottom() {
  // 	this.$refs.comp.onfreshBottom(this.tabIndex);
  // },

  onPullDownRefresh() {
    this.$refs.comp.initData(this.tabIndex)
  },
  mounted() {
    this.$refs.comp.initData(0)
  },
  methods: {
    onTabChange(obj) {
      if (this.tabIndex === obj.index) {
        return
      }
      this.tabIndex = obj.index
      this.$refs.comp.initData(this.tabIndex)
    },
    styleSelector(option) {
      return 'level_' + option
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  ::v-deep .top-bar-item {
    font-size: 16px;
    color: #999999;
    font-weight: normal;
  }

  ::v-deep .top-bar-item.active {
    font-weight: bold;
    color: #454a5e;
  }
}

.check {
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 700;
    position: relative;

    .task-status {
      position: absolute;
      top: 10rpx;
      right: 0;

      .icon-style {
        width: 100rpx;
        height: 88rpx;
      }
    }
  }

  .icon-style {
    width: 52rpx;
    height: 52rpx;
    margin-right: 20rpx;
  }

  .text {
    color: #999;

    text {
      width: 62%;
      color: #333;
      display: inline-block;
    }

    .bg-select {
      display: inline-block;
      margin-left: 5px;

      i {
        display: inline-block;
        font-style: normal;
        margin-right: 5px;
      }

      &.level_1 {
        color: #a14430;
      }

      &.level_2 {
        color: #c87c32;
      }

      &.level_3 {
        color: #c4c088;
      }

      &.level_4 {
        color: #88b4c4;
      }
    }

    .text-right {
      width: 76%;
      text-align: left;
      // height: 76rpx;
      overflow: hidden;
    }

    .text-right1 {
      width: 68%;
    }
  }

  .flex-text {
    padding-top: 24rpx;
    display: flex;
    color: #999;

    text {
      color: #333;
      display: inline-block;
    }
  }

  .deal-btn {
    width: 22vw;
  }

  .report-btn {
    width: 36vw;
  }

  .bor-top {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    border-top: 1px solid #d5d7e3;
  }
}
</style>
